<template>
  <div id="app">
    <div class="exam">
      <div class="cell flex flex-wrap" v-for="item in maze">
        <div v-for="box in item" class="cell-item" :class="'cell'+box+''"></div>
      </div>
    </div>
  </div>
</template>
<script>
const SPACE = 0;
const TREE = 1;
const ROLE = 2;
const GOLD = 3;
export default {
  name: "name",
  components: {},
  computed: {},
  mounted() {
    this.init();
    this.event();
    // this.initMap()
  },
  data() {
    return {
      maze: [
        [1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 0, 0, 0, 0, 1, 1],
        [1, 0, 0, 0, 0, 0, 0, 1],
        [1, 1, 0, 0, 0, 0, 0, 1],
        [1, 1, 0, 0, 0, 0, 1, 1],
        [1, 1, 1, 0, 0, 1, 1, 1],
        [1, 0, 0, 0, 0, 0, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1]
      ],
      roleLocal: [2, 3],
      goldLocal: [4, 1]
    };
  },
  methods: {
    init() {
      let { roleLocal, goldLocal } = this;
      this.setLocal(roleLocal, "role");
      this.setLocal(goldLocal, "gold");
    },
    //  随机地图 //todo
    initMap() {
      let ret = [];
      for (let i = 0; i < 8; i++) {
        ret[i] = [];
        for (let j = 0; j < 8; j++) {
          var value = Math.random() > 0.5 ? 1 : 0;
          ret[i].push(value);
        }
      }
      let roleinit = [this.getRandomInt(0, 7), this.getRandomInt(0, 7)];
      let goldinit = [this.getRandomInt(0, 7), this.getRandomInt(0, 7)];
      ret[roleinit[0]][roleinit[1]] = ROLE;
      ret[goldinit[0]][goldinit[1]] = GOLD;
      this.maze = ret;
      this.roleLocal = roleinit;
      this.goldLocal = goldinit;
    },
    getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    },
    setLocal([x, y], type) {
      type == "role"
        ? this.$set(this.maze[x], y, ROLE)
        : this.$set(this.maze[x], y, GOLD);
    },
    event() {
      window.addEventListener("keydown", e => {
        let { roleLocal } = this;
        this.getLocal(roleLocal, e.keyCode);
      });
    },
    moveUp(data, x, y) {
      for (let i = 0; i < data.length; i++) {
        if(x - i - 1 < 0){ break}
        if (data[x - i - 1][y] == TREE || data[x - i][y] == GOLD) {
            return [x - i, y];
          }
      }
      return [0, y];
    },
    moveDown(data, x, y) {
      for (let i = 0; i < data.length; i++) {
        if (x + i + 1 > data.length - 1) { break;} 
        if (data[x + i + 1][y] == TREE || data[x + i][y] == GOLD) {
            return [x + i, y];
          }
      }
      return [data.length - 1, y];
    },
    moveLeft(data, x, y) {
      for (let i = 0; i < data[0].length; i++) {
        if (y - i - 1 < 0) {break; }
        if (data[x][y - i - 1] == TREE || data[x][y - i] == GOLD) {
            return [x, y - i];
          }
      }
      return [x, 0];
    },
    moveRight(data, x, y) {
      for (let i = 0; i < data[0].length; i++) {
        if (y + i + 1 > data.length - 1) {break;}
        if (data[x][y + i + 1] == TREE || data[x][y + i] == GOLD) {
            return [x, y + i];
          }
      }
      return [x, data.length - 1];
    },
    getLocal([x, y], type) {
      x = parseInt(x);
      y = parseInt(y);
      let data = this.maze.slice();
      let local = [];
      if (type == 38) { //上
        local = this.moveUp(data, x, y);
      }
      if (type == 40) {//下
        local = this.moveDown(data, x, y);
      }
      if (type == 37) { //左
        local = this.moveLeft(data, x, y);
      }
      if (type == 39) {//右
        local = this.moveRight(data, x, y);
      }
      return this.move(local);
    },
    move(local) {
      let [x, y] = this.roleLocal;
      let [i, j] = local;
      this.roleLocal = [i, j];
      this.$set(this.maze[x], y, SPACE);
      this.$set(this.maze[i], j, ROLE);
      return this.judgeState();
    },
    judgeState() {
      let data = JSON.stringify(this.maze.slice());
      if (!data.includes(GOLD)) {
        setTimeout(() => {
          alert("YOU WIN");
          this.initMap();
        }, 100);
      }
    }
  }
};
</script>
<style lang="scss" >
.flex {
  display: flex;
}
.flex-wrap {
  flex-wrap: wrap;
}
.exam {
  width: 800px;
  height: 800px;
  background-color: #333;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -400px;
  margin-top: -400px;
  .cell-item {
    width: 100px;
    height: 100px;
  }
  .cell1 {
    background: url(assets/tree.png) no-repeat 50% 50%;
    background-size: cover;
  }
  .cell2 {
    background: url(assets/role.png) no-repeat 50% 50%;
    background-size: cover;
  }
  .cell3 {
    background: url(assets/gold.png) no-repeat 50% 50%;
    background-size: cover;
  }
}
</style>
